<template>
  <div id="scroll-board2">
    <div class="center-board-title">
      3年以上未使用空编的部门（单位）
      <el-select v-model="value" @change="changeVal" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <dv-scroll-board :config="config" />
  </div>
</template>

<script>
import Sever from '@/api/selfApi'
export default {
  name: 'ScrollBoard2',
  props: {
    depCode: {
      type: String
    }
  },
  data() {
    return {
      options: [
        {
          value: 'xzjg',
          label: '行政机关'
        },
        {
          value: 'sydw',
          label: '事业单位'
        }
      ],
      value: 'xzjg',
      config: {}
    }
  },
  watch: {
    depCode(newValue, oldValue) {
      this.initData()
    },
    value(newValue, oldValue) {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      //请求后台返回数据
      try {
        //请求后台接口
        const res = await Sever.bzzy.getThreeYearKbdw({
          dep_code: this.depCode,
          jgtype: this.value
        })
        console.log(res)
        //数组解构
        var arrays = []
        res.forEach((element) => {
          let { JGSY_NAME: col1, KBS: col2, RUBIANDJSJ: col3 } = element
          arrays.push([col1, col2, col3])
        })
        console.log(arrays)
        //赋值给变量
        this.config = {
          header: ['单位名称', '空编数', '最近用编时间'],
          data: arrays,
          index: true,
          columnWidth: [50, 280, 80],
          align: ['center', 'left', 'center', 'center'],
          rowNum: 7,
          headerBGC: '#1981f6',
          oddRowBGC: 'rgba(0, 44, 81, 0.8)',
          evenRowBGC: 'rgba(10, 29, 50, 0.8)',
          waitTime: 3000,
          carousel: 'page' //整页滚动
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss">
#scroll-board2 {
  width: calc(40% - 15px);
  height: 100%;
  box-sizing: border-box;
  background-color: rgba(1, 35, 102, 0.9);
  //background-color: #012366;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .center-board-title {
    border-bottom: #336699 1px solid;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;

    .el-select {
      width: 160px;
      margin-left: 30px;
      .el-input--suffix {
        > input {
          background-color: #133596;
          color: #83a8f4;
          border: 1px solid #83a8f4;
          border-radius: 16px;
          height: 32px;
        }
        .el-select__caret {
          font-size: 14px;
        }
        .el-input__icon {
          line-height: 32px;
        }
      }
    }
  }
}
</style>
